<div class="outer-wrapper">
	<feed-header
				[query]="(query$ | async).displayString"
				[suggestionList]="(suggestResponse$ | async)"
				[doCloseSuggestBox$]="doCloseSuggestBox$()"
				(searchEvent)="search($event)"
				(relocateEvent)="relocateURL($event)"></feed-header>
		<div *ngIf="(isSearching$ | async) && !newsStatus">
			<div class="searching">
			<!-- Hook Up the Material Design Progress Bar. -->
			</div>
			<div class="searching-message">
				Searching social media messages of the last 30 days.
			</div>
		</div>
		<br>
		<div *ngIf="!(isSearching$ | async) && !newsStatus" class="feed-wrapper">
			<div *ngIf="(areResultsAvailable$ | async)" class="wrapper feed-results">
				<div *ngFor="let item of (apiResponseResults$ | async); let i = index ">
					<feed-card [feedItem]="item" [feedIndex]="i"></feed-card>
				</div>
				<feed-pagination
					(paginate)="loadMoreResults($event)"
					[isNextPageLoading]="(isNextPageLoading$ | async)"
					[areMorePagesAvailable]="(areMorePagesAvailable$ | async)"></feed-pagination>

				<feed-footer
					[query] = "(query$ | async).displayString"
					[apiResponseTags]="(apiResponseTags$ | async)"></feed-footer>
			</div>
			<div *ngIf="(areResultsAvailable$ | async)" class="wrapper feed-info-box">
					<user-info-box
						*ngIf="(areUserResultsValid$ | async) && fromQuery"
						[apiResponseUser] = "(apiResponseUser$ | async)"
						[apiResponseUserFollowing] = "apiResponseUserFollowing$ | async"
						[apiResponseUserFollowers] = "apiResponseUserFollowers$ | async"
						[isUserResponseLoading]= "(isUserInfoSearching$ | async)"></user-info-box>
					<info-box 
						[query] = "(query$ | async)"
						[ApiResponseResult]="(apiResponseResults$ | async)"></info-box>
			</div>
			<div class="results-not-found"
						*ngIf="!(areResultsAvailable$ | async) &&
									((query$ | async).displayString) &&
									!(isSearching$ | async )" >
				<feed-not-found [query]="(query$ | async)"></feed-not-found>
			</div>
		</div>
		<div *ngIf="newsStatus" class="feed-wrapper">
			<div class="wrapper feed-results">
				<app-feed-news></app-feed-news>
			</div>
		</div>
</div>

<!-- Peek the footer when Results are not found -->
<app-footer [class.peeking]="!(isSearching$ | async) && !(areResultsAvailable$ | async)"></app-footer>

<!--Scroll to top-->
<div class="scroll-to-top" [ngClass]="{'show-scroll': navIsFixed}">
	<button (click)="scrollToTop()">
		^
	</button>
</div>
